'use client';
import {DiffFile} from 'diff2html/lib/types';
import {Diff2HtmlUI} from 'diff2html/lib/ui/js/diff2html-ui';
import {memo, useEffect, useRef} from 'react';
import style from './style.module.scss';
import 'diff2html/bundles/css/diff2html.min.css';

const DiffView = memo(function DiffView ({diffFile}: {diffFile: DiffFile[]}) {
    const diffView = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (diffView.current) {
            const diff2htmlUi = new Diff2HtmlUI(diffView.current, diffFile, {
                drawFileList: false,
                matching: 'lines',
                outputFormat: 'side-by-side',
                highlight: false
            });
            diff2htmlUi.draw();
        }
    }, [diffFile]);

    return <div className={style['diff-wrapper-view']} ref={diffView} />;
});

export default DiffView;
